<template>
    <div class="contain" v-loading="loading">
        <tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "餐厅管理", "url": "/home"},{"name": "订单管理", "url": "/order-manage"}]'></tz-breadcrumb>
        <div class="section-one-border">
            <el-row :gutter="10" class="section-one" style="margin-left:0px;margin-right:0px">
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="left">
                    <span>订单管理</span>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                    <!-- <div class="grid-content text-right add-btn" @click="edit(1,'','')">
                        <i class="el-icon-plus"></i>添加厨房</div> -->
                </el-col>
            </el-row>
        </div>
        <!-- table -->
        <div class="main-contain">
            <div  class="s-list-title text-center" v-if="noInfo">----暂无订单信息----</div>
            <div v-if="list != ''">
                <table class='pay-tb'>
                    <thead>
                        <tr>
                            <th>订单号</th>
                            <th>订单名称</th>
                            <th>下单时间</th>
                            <th>菜品数</th>
                            <th>金额</th>
                            <th>买单时间</th>
                            <th>订单状态</th>
                            <th>所属</th>
                            <th>类型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>{{item.order_code}}</td>
                            <td>{{item.type !='' && item.type == 1?'客人下单': '服务员下单'}}</td>
                            <td>{{item.created_at}}</td>
                            <td>{{item.goods_list_number}}</td>
                            <td>{{item.total_price}}</td>
                            <td>{{item.pay_time}}</td>
                            <td><span v-if="item.status == 1" style="color:#3299EB">待支付</span>
                                <span v-if="item.status == 2" style="color:#FAAD15">待收货</span>
                                <span v-if="item.status == 3" style="color:#52C41A">已完成</span>
                                <span v-if="item.status == 4" style="color:#F5212D">退款中</span>
                                <span v-if="item.status == 5" style="color:#333333">退款完成</span>
                                <span v-if="item.status == 6" style="color:#666">订单取消</span>
                                <!-- {{item.status == 1?'待支付':item.status == 2?'待收货':item.status == 3?'已完成':item.status == 4?'退款中':item.status == 5?'退款完成':'订单取消'}} -->
                                </td>
                            <td>{{item.dinner_type == 1?item.room_number:item.dinner_type == 2?item.desk_number:'/'}}

                            </td>
                            <td>
                                <span v-if="item.dinner_type == 1" style="color:#36ADCB">客房送餐</span>
                                <span v-if="item.dinner_type == 2" style="color:#FF6F2E">餐厅点餐</span>
                                <span v-if="item.dinner_type == '' || item.dinner_type == null" style="color:#FAAD15">/</span>
                                <!-- {{item.dinner_type == 1?'客房送餐': item.dinner_type == 2?'餐厅点餐':'/'}}</td> -->
                            <td><a class="delete-btn"  @click="detail(item.id,item.dinner_type,item.type,item.status,item.order_code)">详情</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-center page-border">
                    <div class="page-border-size">每页显示{{size}}条</div>
                <el-pagination v-if="total > size"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size="size"
                :total="total">
                </el-pagination>
                </div>
            </div>
        </div>      
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb'

export default {
    components: {
        'tz-breadcrumb': tzBreadcrumb,
    },
    data () {
      return {
        page:1,
        size:10,
        total:0,
        list:[],
        total:0,
        loading:false,
        // 餐厅id
        restaurant_id: this.$route.query.id,
        noInfo:false
      }
    },
    methods:{
        // 页码点击事件
        handleCurrentChange (val) {
            this.page = val;
            this.getOrderData();
        },
        getOrderData () {
           this.loading = true;
           http.post(api.ordersList, {
                seller_id: localStorage.getItem("seller_id"),
                restaurant_id: this.$route.query.id,
                current_page:this.page,
                perpage:this.size
            }, (res) => {
               this.loading = false;
               console.log(res);
               if(res.data[0].data == '') {
                this.noInfo = true;
               } else{
                this.noInfo = false;
               }
               if(res.code == '10001'){
                this.list = res.data[0].data;
                this.total = res.data[0].total;
                console.log(res.data[0].total);
                
               } else {
                  this.$message({
                        type: 'info',
                        message: res.msg
                  });
               }
            }, () => {
            console.log('网络错误');
            this.loading = false;
            }); 
        },
        detail(id,dinnerType,cType,status,order_code){
          this.$router.push({
            path: '/order-manage-detail',
            query: {
              id: id,
              rid:this.restaurant_id,
              dinnerType:dinnerType,
              cType:cType,
              cStatus:status,
              order_code:order_code
            }
          });
        }
    },
    mounted ()  {
      console.log(5555);
      var that = this;
      // 餐厅列表接口获取
      that.getOrderData ();
  
    },
    
}
</script>
<style scoped>
.section-one {
    background: #fff;
    line-height: 50px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    margin-top: 10px;   
}
.section-one,.main-contain{
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-top:10px;
}
.section-one .left{
    font-size:16px;
    font-weight: bold;
}
.add-btn{
    width: 90px;
    float: right;
    color: #FF6F2E;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
}
.main-contain {
    padding:20px 20px 50px 20px;
    box-sizing: border-box

}
.pay-tb {
    border-collapse: collapse;
    width: 100%;
}
.pay-tb th {
    text-align: left;
    color: #333;
    font-size:16px;
}
.pay-tb td{
   color: #666; 
   font-size:14px;
}
.pay-tb tr{
    border-bottom:1px solid #e7e7e7;
}
.pay-tb td, .pay-tb th {
    height: 40px;
    text-align: center;
    /* border: 1px solid violet; */
}
.delete-btn{
    color:#586EA1;
    cursor: pointer;
}
.page-border{
    margin-top:40px;
    position: relative;
    padding-left:100px;
    box-sizing: border-box
}
.page-border-size{
    position: absolute;
    left:0px;
    top:0px;
    line-height:30px;
    font-size:14px;
    color:#666;
    width:90px;
}
.s-list-title {
  color:#999;
  margin-bottom:5px;
  font-size:14px;
  width:100%
}
</style>
